import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from '@/common/layer';
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import jquery from 'jquery';
import jquerydate from '@/common/jquerydate'
import Sel1View from '@/components/sel1'
import RadioPicker2 from '@/components/RadioPicker2'
import RadioPicker1 from '@/components/RadioPicker1'
import Picker from '@/components/picker'

class Delookprog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prodata: '',
            saleid: '',
            endReason: '',
            protit: '',
            professionalGroups: [],
            professional: -1,
            professionalLabel: '',
            professionalShow: false,
            firsttime:'',
            firstRemark:'',
            secondtime:'',
            secondRemark:'',
            thirdtime:'',
            thirdRemark:'',
            fourtime:'',
            fourRemark:'',
            fifthtime:'',
            fifthRemark:'',
            sixtime:'',
            sixRemark:'',
            loanEnd:'',
        }
    }

    componentDidMount() { 
        this.gethandlelist()//获取运营者列表
        this.getprog(util.getQuery().apply)//查询进度：apply
        jquery.date('#first1');
        jquery.date('#first2');
        jquery.date('#second1');
        jquery.date('#second2');
        jquery.date('#third1');
        jquery.date('#third2');
        jquery.date('#fourth1');
        jquery.date('#fourth2');
        jquery.date('#five1');
        jquery.date('#five2');
        jquery.date('#six1');
        jquery.date('#six2');

        //限制textarea字数
        jquery("textarea").on('keyup', function () {
            var val = jquery("textarea").val()
            // jquery("#textNum").text(val.length)
            if (val.length >= 50) {
                jquery("textarea").val(val.substring(0, 50))
                layer.open({
                    content: "文字超出了",
                    btn: "知道了"
                })
            }
        })
    }
    async gethandlelist(){
        let sendobj={
            'userType':0,
        }
        let res = await util.rjax({
            url: '/otherProductUser/getHandlerList',
            type: "post",
            data:sendobj
        })
        if (res) {
            var data = res.data.rows
            for (let i in data) {
                var obj = {}
                obj = { value: data[i].id, label: data[i].name }
                this.state.professionalGroups.push(obj)
            }
        }
    }

    //中止报单
    async cancel() {
        let res = await util.rjax({
            url: '/otherProductStatus/end?id=' + util.getQuery().id + "&endReason=" +  jquery("textarea.canceltext").val(),
            type: "post"
        })
        if (res) {
            // layer.open({
            //     content:res.msg,
            //     btn:"确定",
            //     yes: function () {
            //         window.location.href = `./defbbus.html`;
            //     }})
           layer.open({content: res.msg,btn: "知道了"})
           jquery("input.r").hide()
           jquery("textarea.r").hide()
           jquery("span.r").show()

        }
    }

    async gocancel(e) {
        jquery(".dialogcancel").show()
    }
    //yes
    async yes(e) {
        var text = jquery("textarea").val()
        console.log(text)
        if (jquery("textarea.canceltext").val() == '') {
            layer.open({
                content: "取消原因不能为空",
                btn: "好的"
            })
        } else {
            this.cancel()
            jquery(".dialogcancel").hide()
        }
    }
    //no
    async no(e) {
        jquery(".dialogcancel").hide()
    }

    //运营者弹框是否选择
    async masteryes(e) {
        this.state.professional >= 0 ? jquery(".dialogmaster").hide() : jquery(".selmaster").show().fadeOut(2000)
    }

    // 获取报单处理进度用于回显
    async getprog(apply) {
        let res = await util.rjax({
            url: '/otherProductStatus/getProductStatusById?id=' + apply,
            type: "get"
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            if (res.data.handlerId == undefined) {
                jquery(".dialogmaster").show()
            } else {
                jquery(".dialogmaster").hide()
                this.setState({professional:res.data.handlerId})
                this.setState({ prodata: res.data })
                console.log(this.state.prodata)
            }
            //根据获取的值 回显数据
            jquery("input").each(function () {
                if (jquery(this).siblings("span.r").html() != '') {
                    jquery(this).siblings("span.r").show()
                    jquery(this).hide()
                }
            })
            jquery("textarea.r").each(function () {
                if (jquery(this).siblings("span.r").html() != '') {
                    jquery(this).siblings("span.r").show()
                    jquery(this).hide()
                }
            })
        }
    }

    
    // 提交报单数据
    async gosubmit(){
         this.submit()
    }

    async submit() {
        console.log(this.state.professional)
        let sendobj = {
            'id':util.getQuery().id,
            'handlerId':this.state.professional,
            "firstExceptDay": this.state.firsttime,
            "firstExceptTime": jquery('#first1').val(),
            "firstRealTime":  jquery('#first2').val(),
            "firstRemark":  this.state.firstRemark,

            "secondExceptDay": this.state.secondtime,
            "secondExceptTime": jquery('#second1').val(),
            "secondRealTime": jquery('#second2').val(),
            "secondRemark":  this.state.secondRemark,

            "thirdExceptDay": this.state.thirdtime,
            "thirdExceptTime": jquery('#third1').val(),
            "thirdRealTime": jquery('#third2').val(),
            "thirdRemark": this.state.thirdRemark,

            "fourthExceptDay": this.state.fourRemark,
            "fourthExceptTime":jquery('#fourth1').val(),
            "fourthRealTime": jquery('#fourth2').val(),
            "fourthRemark": this.state.fourRemark,

            "fifthExceptDay": this.state.fifthtime,
            "fifthExceptTime": jquery('#five1').val(),
            "fifthRealTime": jquery('#five2').val(),
            "fifthRemark": this.state.fifthRemark,

            "sixthExceptDay":this.state.sixtime,
            "sixthExceptTime":jquery('#six1').val(),
            "sixthRealTime": jquery('#six2').val(),
            "sixthRemark": this.state.sixRemark,
            'loanEnd':this.state.loanEnd,
        }
        let res = await util.rjax({
            url: '/otherProductStatus/handle',
            type: "post",
            data: sendobj
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
             layer.open({
                content:res.msg,
                btn:"确定",
                yes: function () {
                    window.location.href = `./defbbus.html`;
                }})
        }
    }

    firsttimeChange(e) {
        this.setState({ firsttime: e.target.value })
    }
    firstRemarkChange(e){
        this.setState({ firstRemark: e.target.value })
    }
    secondtimeChange(e) {
        this.setState({ secondtime: e.target.value })
    }
    secondRemarkChange(e){
        this.setState({ secondRemark: e.target.value })
    }
    thirdtimeChange(e) {
        this.setState({ thirdtime: e.target.value })
    }
    thirdRemarkChange(e){
        this.setState({ thirdRemark: e.target.value })
    }
    fourtimeChange(e) {
        this.setState({ fourtime: e.target.value })
    }
    fourRemarkChange(e){
        this.setState({  fourRemark: e.target.value })
    }
    fifthtimeChange(e) {
        this.setState({  fifthtime: e.target.value })
    }
    fifthRemarkChange(e){
        this.setState({ fifthRemark: e.target.value })
    }
    sixtimeChange(e) {
        this.setState({ sixtime: e.target.value })
    }
    sixRemarkChange(e){
        this.setState({ sixRemark: e.target.value })
    }
    loanEndChange(e){
        this.setState({ loanEnd: e.target.value })
    }

    render() {
        return (
            <div>
                <div className="lookprog">
                    <div className="stateList">
                        <p className="state">收到报单日期</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.firstExceptTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="first1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <input className="r" value={this.state.firsttime} onChange={this.firsttimeChange.bind(this)} placeholder="点击输入" type="text" />
                                    <span className="r">{this.state.prodata.firstExceptDay}</span>
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.firstRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="first2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.firstRemark}</span>
                                <textarea className="r" value={this.state.firstRemark} onChange={this.firstRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">销售提交材料</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.secondExceptTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="second1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prodata.secondExceptDay}</span>
                                    <input className="r" value={this.state.secondtime} onChange={this.secondtimeChange.bind(this)} placeholder="点击输入" type="text" />
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.secondRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="second2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.secondRealTime}</span>
                                <textarea className="r"  value={this.state.secondRemark} onChange={this.secondRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">销售提供居间合同</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.thirdExceptTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="third1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prodata.thirdExceptDay}</span>
                                    <input className="r"  value={this.state.thirdtime} onChange={this.thirdtimeChange.bind(this)}  placeholder="点击输入" type="text" />
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.thirdRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="third2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.secondRealTime}</span>
                                <textarea className="r"  value={this.state.thirdRemark} onChange={this.thirdRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方材料审核反馈</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.fourthExceptTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="four1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prodata.fourthExceptDay}</span>
                                    <input className="r"  value={this.state.fourtime} onChange={this.fourtimeChange.bind(this)}  placeholder="点击输入" type="text" />
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.fourthRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="four2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.secondRealTime}</span>
                                <textarea className="r"  value={this.state.fourRemark} onChange={this.fourRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方实际操作签约等</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.fifthExceptTime}</span>
                                    <input className="r"  value={this.state.fifthtime} onChange={this.fifthtimeChange.bind(this)}  placeholder="点击选择" name="ddtime" type="text" id="five1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prodata.fifthExceptDay}</span>
                                    <input className="r" placeholder="点击输入" type="text" />
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.fifthRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="five2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />

                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.secondRealTime}</span>
                                <textarea className="r"  value={this.state.fifthRemark} onChange={this.fifthRemarkChange.bind(this)}  value={this.state.fifthRemark} onChange={this.fifthRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="stateList">
                        <p className="state">资方放款</p>
                        <div className="referrtime">
                            <div className="flexbox">
                                <div className="flex">
                                    <span className="l">预计完成日期</span>
                                    <span className="r">{this.state.prodata.sixthExceptTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="six1" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />
                                </div>
                                <div className="flex">
                                    <span className="l">预计时效(工作日)</span>
                                    <span className="r">{this.state.prodata.sixthExceptDay}</span>
                                    <input className="r" placeholder="点击输入" type="text" />
                                </div>
                                <div className="flex">
                                    <span className="l">实际完成日期</span>
                                    <span className="r">{this.state.prodata.sixthRealTime}</span>
                                    <input className="r" placeholder="点击选择" name="ddtime" type="text" id="six2" data-options="{'type':'YYYY-MM-DD hh:mm','beginYear':2010,'endYear':2088}" style={{ width: '130px', height: '24px' }} />
                                </div>
                                <div className="flex">
                                    <span className="l">下款额</span>
                                    <span className="r">{this.state.prodata.loanEnd}</span>
                                    <input className="r"  value={this.state.loanEnd} onChange={this.loanEndChange.bind(this)} placeholder="点击选择" name="ddtime" type="text" />
                                </div>
                            </div>
                            <p className="remarktit">备注</p>
                            <p className="remark">
                                <span className="r">{this.state.prodata.sixthRealTime}</span>
                                <textarea className="r"  value={this.state.sixRemark} onChange={this.sixRemarkChange.bind(this)} placeholder="点击输入备注" type="text"></textarea>
                            </p>
                        </div>
                    </div>
                    <div className="cancel">
                        <p onClick={this.gosubmit.bind(this)}>提交</p>
                        <p onClick={this.gocancel.bind(this)}>中止报单</p>
                    </div>
                </div>

                <div className="selmaster">请选择运营者</div>

                {/* 取消原因弹框 */}
                <div className="dialogcancel">
                    <div className="iscancelbox">
                        <span className="canceltip">取消原因</span>
                        <textarea className="canceltext" maxLength="50" name="" placeholder="文字不超过50个字" id="" cols="" rows=""></textarea>
                        {/* <span><span id="textNum">0</span>/100</span> */}
                        <p>
                            <span  onClick={this.no.bind(this)} className="no">取消</span>
                            <i></i>
                            <span  onClick={this.yes.bind(this)} className="yes">确定</span>
                        </p>
                    </div>
                </div>

                {/* 处理运营者 弹框 */}
                <div className="dialogmaster">
                    <div className="masterbox">
                        <span className="mastertit">处理运营者 </span>
                        <Sel1View className="master" title={this.state.protit} label={this.state.professionalLabel} onClick={() => { this.setState({ professionalShow: true }) }} />
                        <p>
                            <span className="masteryes" onClick={this.masteryes.bind(this)}>确定</span>
                        </p>
                    </div>
                </div>
                <Picker show={this.state.professionalShow} groups={this.state.professionalGroups} onChange={(val, label) => { this.setState({ professional: val, professionalLabel: label, professionalShow: false }) }} onMaskClick={() => { this.setState({ professionalShow: false }) }} />

            </div>

        )
    }
}

ReactDom.render(<Delookprog />, document.getElementById("app"));